<!-- <template>
    <van-tabbar route>
        <van-tabbar-item to="/home" name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/map" name="map" icon="location-o">地图</van-tabbar-item>
        <van-tabbar-item to="/look" name="look" icon="browsing-history-o">看看</van-tabbar-item>
        <van-tabbar-item to="/mine" name="mine" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script>
    export default {
        name: 'Tabbar',
        data(){
            return {
                //active: 'home'
            }
        }
    }
</script> -->
<template>
    <van-tabbar route active-color="white" inactive-color="black">
        <van-tabbar-item to="/home1" name="home1" icon="home-o" @click="homeChangeActive">首页</van-tabbar-item>
        <!-- <van-tabbar-item to="/map" name="map" icon="location-o">地图</van-tabbar-item> -->
        <van-tabbar-item to="" name="community" @click="getCommunityList" :class="[homeActive==1?'fang':'fang1']">智慧小区
            <div class="yuan">
                <img src="../assets/img/suo.png" alt="" v-show="homeActive==1">
                <img src="../assets/img/code2.png" alt="" v-show="homeActive==0">
            </div>
        </van-tabbar-item>
        <van-tabbar-item to="/mine1" name="mine1" icon="friends-o" @click="myChangeActive">我的</van-tabbar-item>

    </van-tabbar>
</template>
<script>
    import { mapMutations, mapState } from 'vuex'
    import { Toast } from "vant"
    export default {
        name: 'Tabbar',
        data() {
            return {
                homeActive: 0
            }
        },
        computed: {
            ...mapState(['token', 'userInfo', 'userid', "homeId"]), // this.token相当于this.$store.state.token

        },
        methods: {
            getCommunityList() {
                let that = this
                this.$axios.get('/comm/getuserReviewStatus', {
                    params: {
                        user_id: this.userid
                    }
                }).then((res) => {
                    //console.log(res);
                    let { message, data, status } = res;
                    console.log(res)
                    if (status == 200) {
                        if (data.comm_state == 2 || data.comm_state == 3 && data.idcard_state == 2) {
                            this.$router.push(
                                {
                                    name: 'community'
                                },
                            )
                        } else {
                            Toast("请先绑定小区")
                            this.$router.push(
                                {
                                    name: 'IDcard'
                                },
                            )
                        }
                    }
                })
                this.homeActive = 1
            },
            homeChangeActive() {
                this.homeActive = 0
            },
            myChangeActive() {
                this.homeActive = 0
            }
        }
    }
</script>
<style lang="scss" scoped>
    .fang {
        position: relative;
        color: white !important;
    }

    .fang1 {
        position: relative;
        color: black !important;
    }

    [class*=van-hairline]::after {
        border: none !important;
    }

    .van-tabbar {
        background-color: #4b77e4 !important;
    }

    .yuan {
        width: 60px;
        height: 60px;
        background-color: #4b77e4;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: -1;
        text-align: center
    }

    .yuan img {
        margin-top: 5px;
        width: 24px;
        height: 24px;
    }

    .van-tabbar-item {
        /* color: white ; */
    }

    .van-tabbar {
        height: 40px;
    }
</style>